<template>
  <!-- 实物产品配置 -->
  <app-container class="physical-product-config">
    <app-block>
      <zm-form inline>
        <zm-form-item>
          <zm-input v-model="searchForm.productName" placeholder="请输入产品名称/编码查询"></zm-input>
        </zm-form-item>
        <zm-form-item>
          <tree-select ref="treeSelect1" v-model="searchForm.categoryId" :tree="categoryList" :tree-props="{ label: 'name', valueKey: 'id' }" :is-checkbox="true" placeholder="请选择产品类目" class="dib"></tree-select>
        </zm-form-item>
        <template>
          <zm-form-item>
            <div class="physical-product-config__counter">
              <el-input-number v-model="searchForm.minVal" class="w150" :precision="2" controls-position="right" :min="0" :controls="false"></el-input-number>
              <span class="physical-product-config__append">元</span>
            </div>
          </zm-form-item>
          <zm-form-item>
            <zm-data-select class="w150" v-model="searchForm.minOperator" :list="pareList" placeholder="请选择"></zm-data-select>
          </zm-form-item>
          <zm-form-item label="最低销售单价"></zm-form-item>
          <zm-form-item>
            <zm-data-select class="w150" v-model="searchForm.maxOperator" :list="pareList" placeholder="请选择"></zm-data-select>
          </zm-form-item>
          <zm-form-item>
            <div class="physical-product-config__counter">
              <el-input-number v-model="searchForm.maxVal" class="w150" :precision="2" controls-position="right" :min="0" :controls="false"></el-input-number>
              <span class="physical-product-config__append">元</span>
            </div>
          </zm-form-item>
        </template>
        <zm-form-item>
          <tree-select ref="treeSelect2" v-model="searchForm.apartmentId" :tree="apartmentList" :tree-props="{ label: 'name', valueKey: 'value' }" :is-checkbox="true" placeholder="可售部门" class="dib">
          </tree-select>
        </zm-form-item>
        <zm-form-item>
          <zm-button t="search" @click="onSearch">
            查询
          </zm-button>
          <zm-button t="reset" @click="handleReset">
            重置
          </zm-button>
        </zm-form-item>
        <br />
        <zm-form-item label="商品状态:">
          <zm-data-radio size="small" is-btn :list="storeStatusList" v-model="searchForm.isSale" @change="onSearch" />
        </zm-form-item>
      </zm-form>
    </app-block>

    <app-block>
      <div class="mb20">
        <zm-button t="add" @click="operation('new',{})">
          新增
        </zm-button>
        <zm-button @click="onExcelImport">Excel导入</zm-button>
        <zm-button type="warning" icon="el-icon-setting" @click="handleSetSale" :disabled="tableParams.selectList.length === 0">
          设为可售
        </zm-button>
      </div>
      <zm-table-data :data="tableParams.data" :table-params="tableParams" :columns="column" :fetch="loadList" @selection-change="getSelectionIds" ref="zmTableData" mutilple>
      </zm-table-data>

      <new-product v-if="newParams.visible" v-model="newParams.visible" :obj="newParams.obj" @afterSave="onSearch">
      </new-product>
      <physical-product-config-detail v-if="detailParams.visible" v-model="detailParams.visible" :id="detailParams.id" :obj="detailParams.obj"></physical-product-config-detail>
      <excel-import v-if="importParams.visible" v-model="importParams.visible" :obj="importParams.obj"></excel-import>
    </app-block>
  </app-container>
</template>

<script>
import publicApis from '@/api/src/public'
import zmTableMixin from '@/mixins/zmTableMixin'
import TreeSelect from '@/components/TreeSelect'
import PhysicalProductConfigDetail from './components/physicalProductConfigDetail/index.vue'
import ExcelImport from './components/excelImport/index.vue'
import NewProduct from './components/newProduct/index.vue'
import { tableColumn } from './const'
import { getProductList, setProductSale, delProduct, copyProduct } from '@/api/src/productDraft.js'

export default {
  name: 'PhysicalProductConfig',
  components: { TreeSelect, PhysicalProductConfigDetail, ExcelImport, NewProduct },
  mixins: [zmTableMixin],
  data () {
    return {
      categoryList: [], // 类目下拉
      pareList: [ // 最值选项
        {
          value: 'lt',
          name: '<'
        },
        {
          value: 'elt',
          name: '<='
        }
      ],
      storeStatusList: [ // 商品状态
        {
          value: '-1',
          name: '全部'
        },
        {
          value: '1',
          name: '已设为可售'
        },
        {
          value: '0',
          name: '暂不可售'
        }
      ],
      apartmentList: [], // 可售部门下拉
      searchForm: {
        productName: '', // 商品名称或编码
        categoryId: '', // 一级或二级分类id
        minVal: undefined, // 最低销售单价最小值
        minOperator: '', // 最低销售单价最小值比对运算符 (<, <=)
        maxVal: undefined, // 最低销售单价最大值
        maxOperator: '', // 最低销售单价最大值比对运算符 (<, <=)
        apartmentId: '', // 可售部门ID
        isSale: '-1' // 状态(1 可售 0 不可售 )
      },
      detailParams: { // 详情参数对象
        visible: false
      },
      importParams: { // excel导入参数
        visible: false
      },
      newParams: { // 新增参数
        visible: false
      }
    }
  },
  computed: {
    column () {
      return tableColumn(this)
    }
  },
  watch: {},
  created () {
    this.init()
  },
  mounted () { },
  methods: {
    async init () {
      this.apartmentList = await publicApis.apartmentList()
      this.categoryList = await publicApis.getProductCategoryList()
    },

    async loadList () {
      const _res = await getProductList(this.assignQuery(this.searchForm))
      this.initialTableData(_res.list, _res.count)
    },
    handleReset () {
      this.$refs.treeSelect1 && this.$refs.treeSelect1.clearSelect()
      this.$refs.treeSelect2 && this.$refs.treeSelect2.clearSelect()
      this.searchForm = {
        productName: '', // 商品名称或编码
        categoryId: '', // 一级或二级分类id
        minVal: undefined, // 最低销售单价最小值
        minOperator: '', // 最低销售单价最小值比对运算符 (<, <=)
        maxVal: undefined, // 最低销售单价最大值
        maxOperator: '', // 最低销售单价最大值比对运算符 (<, <=)
        apartmentId: '', // 可售部门ID
        isSale: '-1' // 状态(1 可售 0 不可售 )
      }
      this.onSearch()
    },
    operation (type, row) {
      switch (type) {
        case 'copy':
          this.$confirm('确定复制?', '复制', {
            type: 'warning'
          }).then(async () => {
            await copyProduct({ id: row.id })
            this.onSearch()
            this.$message.success('复制成功')
          })
          break
        case 'edit':
          this.newParams = {
            visible: true,
            obj: row
          }
          break
        case 'detail':
          this.detailParams = {
            visible: true,
            id: row.id,
            obj: row
          }
          break
        case 'setSale':
          this.$confirm('是否设为可售?', '设为可售', { type: 'warning' })
            .then(async () => {
              await setProductSale({ ids: row.id })
              this.onSearch()
              this.$message.success('已成功设为可售产品')
            })
            .catch((err) => err)
          break
        case 'del':
          this.$confirm('是否删除产品?', '删除', { type: 'warning' })
            .then(async () => {
              await delProduct({ id: row.id })
              this.onSearch()
              this.$message.success('已成功删除产品')
            })
            .catch((err) => err)
          break
        default:
          this.newParams = {
            visible: true,
            obj: {}
          }
          break
      }
    },
    // 批量设为可售
    handleSetSale () {
      const _res = this.getSelectionIds()
      const _count = this.tableParams.selectList.length
      this.$confirm(`已选 ${_count} 条数据，确定全部设为可售状态?`, '批量操作')
        .then(async () => {
          const res = await setProductSale({ ids: _res.join(',') })
          this.$refs.zmTableData.clearSelection()
          this.onSearch()
          this.$message.success(res.content)
        })
        .catch((err) => err)
    },
    onExcelImport () {
      this.importParams = {
        visible: true,
        obj: {
          categoryList: this.categoryList,
          apartmentList: this.apartmentList
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.physical-product-config {
  &__counter {
    display: flex;
  }
  &__append {
    display: inline-block;
    height: 32px;
    width: 35px;
    background: #f5f7fa;
    border: 1px solid #dcdfe6;
    border-left: unset;
    border-radius: 0 4px 4px 0;
    color: #909399;
    text-align: center;
  }
}
</style>
